<div class="card border-info m-3">
    <h5 class="card-header bg-info text-white">新增</h5>
    <div class="card-body">
        <h5 class="card-title">基础信息</h5>
        <p class="card-text">请按内容提示，录入相关信息。</p>
        <form [formGroup]="groupForm">
        <div class="row mb-3">
            <div class="col-6">
                <ng-select [items]="extend.domain.house.items" bindLabel="name" bindValue="id" [searchable]="true"
                    formControlName="house"
                    [multiple]="false" [closeOnSelect]="true" 
                    placeholder="{{extend.domain.house.nickname}}"
                    tooltip="{{extend.domain.house.nickname}}" (change)="extend.domain.house.change($event)">
                </ng-select>
                <!-- <span class="badge badge-danger" *ngIf="errRes.error?.detail['WmsTraysManage.serNum'] !== null">{{errRes.error?.detail['WmsTraysManage.serNum']}}</span> -->
            </div>
            <div class="col-6">
                <ng-select [items]="extend.domain.area.items" bindLabel="name" bindValue="id" [searchable]="true"
                formControlName="area"
                    [multiple]="false" [closeOnSelect]="true" placeholder="{{extend.domain.area.nickname}}"
                    tooltip="{{extend.domain.area.nickname}}" (change)="extend.domain.area.change($event)">
                </ng-select>
                <!-- <span class="badge badge-danger" *ngIf="errRes.error?.detail['WmsTraysManage.serNum'] !== null">{{errRes.error?.detail['WmsTraysManage.serNum']}}</span> -->
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">分隔符</button>
                    </div>
                    <input type="text" formControlName="separator" class="form-control border-info">
                </div>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">货架</button>
                    </div>
                    <input type="text" formControlName="storageRack" class="form-control border-info">
                </div>
            </div>
        </div>
        <div class="divider">
            <div class="alert-primary divider-line">
                <hr>
            </div>
            <div class="divider-title">层 (请输入正整数)</div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">起始流水号</button>
                    </div>
                    <input type="text" formControlName="start" class="form-control border-info">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">流水号位数</button>
                    </div>
                    <input type="text" formControlName="length"  class="form-control border-info">
                </div>
            </div>
            <div class="col">
                <ng-select [items]="extend.domain.layer.items" bindLabel="name" bindValue="id" [searchable]="true"
                     [closeOnSelect]="true" placeholder="{{extend.domain.layer.nickname}}"
                     formControlName="layer"
                    tooltip="{{extend.domain.layer.nickname}}" (change)="extend.domain.layer.change($event)">
                </ng-select>
            </div>
        </div>
        <div class="layer-container" *ngIf="arrForm.length>0">
                <div formArrayName="arr">
                <div class="row mb-3" *ngFor="let form of arrForm.controls; let i=index;" [formGroupName]="i" >
                    <div class="col-6">
                        <div class="row mb-3">
                            <div class="col-auto">
                                    <button class="btn btn-info border-info" type="button">{{enum.get(i+1+'')}}层</button>
                            </div>
                            <div class="col-5">
                                    <ng-select [items]="level1Map.get(i)" [clearable]="false" bindLabel="name" bindValue="id" [searchable]="true" 
                                    [multiple]="false" [closeOnSelect]="true" [placeholder]="extend.domain.serLevel1.nickname"
                                    tooltip="{{extend.domain.serLevel1.nickname}}" formControlName="Level1" (change)="func.change($event)">
                                </ng-select>
                            </div>
                            <div class="col-5">
                                <ng-select [items]="level2Map.get(i)" [clearable]="false" bindLabel="name" bindValue="id" [searchable]="true"
                                    [multiple]="false" [closeOnSelect]="true" placeholder="{{extend.domain.serLevel2.nickname}}"
                                    tooltip="{{extend.domain.serLevel2.nickname}}" formControlName="Level2">
                                </ng-select>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group">
                            <div class="input-group-prepend w-25">
                                <button class="btn btn-info border-info w-100" type="button">货位数</button>
                            </div>
                            <div class="col-5 ng-select-col">
                                    <ng-select class="ng-select-custom" [items]="locationArr" [clearable]="false" bindLabel="name" bindValue="id" [searchable]="true"
                                    [multiple]="false" [closeOnSelect]="true" placeholder="货位数"
                                    tooltip="货位数" formControlName="LocationNum">
                            </ng-select>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="input-group">
                            <div class="input-group-prepend w-25">
                                <button class="btn btn-info border-info w-100" type="button">货位码放数</button>
                            </div>
                            <div class="col-5 ng-select-col">
                                <ng-select class="ng-select-custom" [items]="locationArr" [clearable]="false" bindLabel="name" bindValue="id" [searchable]="true"
                                    [multiple]="false" [closeOnSelect]="true" placeholder="货位码放数"
                                    tooltip="货位码放数" formControlName="LocationCodeNum">
                                </ng-select>
                            </div>

                        </div>
                    </div>
                </div>
                </div>
        </div>
        <div class="text-center mt-5">
            <button type="button" class="btn btn-outline-primary" (click)="func.save.req($event)">Save</button>
        </div>
        </form>
    </div>
</div>

<span class="badge badge-info mr-3" *ngIf="errRes?.error?.timestamp !== null">response time:
    {{errRes?.error?.timestamp}}</span>
<div *ngIf="false">
    <p>{{errRes.error}}</p>
    <p>{{errRes.error?.code}}</p>
    <p>{{errRes.error?.description}}</p>
    <p>{{errRes.error?.theme}}</p>
    <p>{{errRes.error?.timestamp}}</p>
    <p>{{errRes.error?.detail?.RR?.duration}}</p>
    <p>{{errRes.error?.detail['WmsTraysManage.serNum']}}</p>
    <p>{{errRes.error?.detail['WmsTraysManage.serAudit']}}</p>
    <p>{{errRes.error?.detail['WmsTraysManage.serValid']}}</p>
    <p>{{errRes.error?.detail['WmsTraysManage.serValid2']}}</p>
    <p>{{errRes.headers}}</p>
    <p>{{errRes.message}}</p>
    <p>{{errRes.name}}</p>
    <p>{{errRes.ok}}</p>
    <p>{{errRes.status}}</p>
    <p>{{errRes.statusText}}</p>
    <p>{{errRes.url}}</p>
</div>